<?php echo $header; ?>
<div class="alert-wrap">
    <div class="alert-exam alert-position">
    </div>
</div>
<div class="container in-wrap">
    <div class="row">
        <div class="col-md-10 col-md-offset-1 col-sm-12">
            <h1 class="text-center"><?php echo $maincontent; ?></h1>
        </div>
    </div>
    <div class="grid grid-pad">
        <section class="col-1-1">
            <div class="playground grid">
                <div class="col-1-1 viewport">
                    <div class="tlt title-tlt" data-key="0">
                        <ul class="texts" style="display: none">
                            <li data-id="fox" id="fox">点击换一个开始！</li>
                        </ul>
                    </div>
                </div>
                <div class="col-1-1 controls" style="padding-right: 0">
                    <form class="grid grid-pad">
                        <div class="control col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-5 col-xs-10 grid-button-wrap">
                            <a class="btn btn-primary change-one" href="javascript:void(0);" id="prev">换一个</a>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
    <div class="grid grid-pad">
        <section class="col-1-1">
            <div class="playground grid">
                <div class="col-1-1 viewport">
                    <div class="tlt answer-tlt" data-key="0">
                        <ul class="texts" style="display: none">
                            <li data-id="fox" id="viewanswer">点击查看答案！</li>
                        </ul>
                    </div>
                </div>
                <div class="col-1-1 controls" style="padding-right: 0">
                    <form class="grid grid-pad">
                        <div class="control col-md-2 col-md-offset-5 col-sm-2 col-sm-offset-5 col-xs-10 grid-button-wrap">
                            <a class="btn btn-primary change-one" href="javascript:void(0);" id="btn-viewanswer">查看答案</a>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>
    <?php echo $footerin;?>
    <script>
    $(function() {
        //正文问题首现
        var args = getArgsForText();
        $(".title-tlt").textillate(args);
        args = getArgsForText();
        $(".answer-tlt").textillate(args);
        //标题首现
        args = getArgsForText("in");
        $("h1").textillate(args).textillate("in");
        $alerttarget = $(".alert-exam");
        $("#prev").click(function() {
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "",
                beforeSend: function() {
                    var examalert = '<div class="alert alert-exam-inner alert-warning text-center"><button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><span class="exam-in-alert">正在加载数据请稍后……</span></div>';
                    $alerttarget.html(examalert).fadeIn();
                    $(".exam-in-alert").textillate(args).textillate("in");
                },
                success: function(data) {
                    $alerttarget.css("display", "none");
                    if (data) {
                        //var info = JSON.stringify(data);
                        $("#fox").html(data.kname); //
                        $("#btn-viewanswer").data("detail", data.kdetail);
                    }
                }
            })
            args = getArgsForText("out");
            $(".title-tlt").textillate(args).textillate("out", function() {
                args = getArgsForText("in");
                $(".title-tlt").textillate(args).textillate("in");
            });
        });
        $("#btn-viewanswer").click(function() {
            var info = $(this).data("detail");
            $("#viewanswer").html(info);
            args = getArgsForText("out");
            $(".answer-tlt").textillate(args).textillate("out", function() {
                args = getArgsForText("in");
                $(".answer-tlt").textillate(args).textillate("in");
            });
        })
    });

    function getArgsForText(type) {
        var args = {},
            inAnimate = new Array(),
            outAnimate = new Array(),
            behaviorIndex = false;
        var animateClasses = 'flash bounce shake tada swing wobble pulse flip flipInX flipOutX flipInY flipOutY fadeIn fadeInUp fadeInDown fadeInLeft fadeInRight fadeInUpBig fadeInDownBig fadeInLeftBig fadeInRightBig fadeOut fadeOutUp fadeOutDown fadeOutLeft fadeOutRight fadeOutUpBig fadeOutDownBig fadeOutLeftBig fadeOutRightBig bounceIn bounceInDown bounceInUp bounceInLeft bounceInRight bounceOut bounceOutDown bounceOutUp bounceOutLeft bounceOutRight rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight rotateOutUpLeft rotateOutUpRight hinge rollIn rollOut';
        var behavior = ['none', 'sync', 'reverse', 'shuffle'];
        $.each(animateClasses.split(' '), function(i, value) {
            if (/Out/.test(value) || value === 'hinge') {
                outAnimate.push(value);
            } else if (/In/.test(value)) {
                inAnimate.push(value);
            }
        });
        var outIndex = parseInt(Math.random() * outAnimate.length);
        var inIndex = parseInt(Math.random() * inAnimate.length);
        switch (type) {
            case "in":
                args = {
                    loop: false,
                    in : {
                        effect: inAnimate[inIndex]
                    }
                };
                if (behaviorIndex = parseInt(Math.random() * behavior.length)) {
                    (args.in[behavior[behaviorIndex]] = true);
                }

                break;
            case "out":

                args = {
                    loop: false,
                    out: {
                        effect: outAnimate[outIndex]
                    }
                };
                if (behaviorIndex = parseInt(Math.random() * behavior.length)) {
                    (args.out[behavior[behaviorIndex]] = true);
                }
                break;
            default:
                args = {
                    loop: true,
                    in : {
                        effect: inAnimate[inIndex]
                    },
                    out: {
                        effect: outAnimate[outIndex]
                    }
                };
                if (behaviorIndex = parseInt(Math.random() * behavior.length)) {
                    (args.in[behavior[behaviorIndex]] = true);
                }
                if (behaviorIndex = parseInt(Math.random() * behavior.length)) {
                    (args.out[behavior[behaviorIndex]] = true);
                }
        }
        //alert(JSON.stringify(args));
        return args;
    };
    </script>
    <?php echo $footer;?>
